<template>
  <div class="content">
    <a-row>
      <a-col :span="13">
        <a-card title="登录系统" :bordered="false" hoverable>
          <div class="icon">
            <a-icon type="cloud" theme="twoTone" />
          </div>
          <a-form :form="loginFormData" :label-col="{ span: 4 }" :wrapper-col="{ span: 12 }">
            <a-form-item label="用户名">
              <a-input v-model="loginFormData.username" placeholder="请输入用户名" />
            </a-form-item>
            <a-form-item label="密码">
              <a-input-password v-model="loginFormData.password" placeholder="请输入密码" />
            </a-form-item>

            <a-form-item :wrapper-col="{ offset: 4 }">
              <a-button type="primary" @click="loginSubmit">登录</a-button>
              <a-button type="link">注册账号</a-button>
            </a-form-item>
          </a-form>
          <div class="footer">
            <a-tag>
              <a-icon type="github" />获得源码
            </a-tag>
            <a-tag>
              <a-icon type="qq" />联系作者
            </a-tag>
            <a-tag>
              <a-icon type="alipay-circle" />打赏
            </a-tag>
          </div>
        </a-card>
      </a-col>
      <a-col :span="10">
        <a-result title="没有账号?" sub-title="你可以选择注册或使用临时账号。但临时账户的数据不会在云端存储。">
          <template #icon>
            <!-- <a-icon type="smile" theme="twoTone" /> -->
            <a-icon type="question" />
          </template>
          <template #extra>
            <a-row>
              <a-col :span="12">
                <a-button type="primary">注册账号</a-button>
              </a-col>
              <a-col :span="10">
                <a-button>临时账号</a-button>
              </a-col>
            </a-row>
          </template>
        </a-result>
        <div class="footer">
          <a-statistic title="当前在线用户" :value="13" style="margin-right: 50px" />
          <a-statistic title="累积脚本注入" :value="112893" suffix="次" />
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import { login, checkToken } from '@/api/request/user.js'
import { setToken, getToken } from '@/utils/user.js'
export default {

  data () {
    return {
      loginFormData: {},
    }
  },
  created () {
    if (getToken() != null) {
      checkToken().then(res => {
        if (res.code == 200) {
          // this.$router.push('/home')
        }
      })
    }
  },
  methods: {
    loginSubmit () {
      login(this.loginFormData).then(res => {
        if (res.code == 500) {
          this.$error({
            title: '提示',
            content: '用户名或密码错误',
          });

        } else {
          const that = this
          this.$success({
            title: '提示',
            content: '登录成功',
            onOk: () => {
              that.$router.push('/home')
            }
          });
          setToken(res.data)

        }
      })
    }
  },

}
</script>



<style scope>
.content {
  padding: 20px;
}
.content .icon {
  text-align: center;
}
.content .icon i {
  font-size: 100px;
}
.content .footer {
  margin-top: 10px;
  margin-left: 30px;
}
.content .ant-form-item-control {
  width: 250px;
}

.content .ant-form {
  margin: 0px auto;
}
</style>